<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 准备标签 -->
     <h3 class="title">诗经</h3>
    <div class="box">蒹葭苍苍，白露<strong>为霜。</strong>
        所谓伊人，在水一方
    </div>
</body>
<script>
    //querySelector('标签名')；获取的是该标签名的第一个元素
    const em1=document.querySelector('.title');
    console.log(em1.innerHTML);
    console.log(em1.innerText);
    console.log(em1.textContent);
    const em2=document.querySelector('.box');
    console.log(em2.innerHTML);    //含标签
    console.log(em2.innerText);    //不含标签，纯文本内容，不保留换行、空格等格式
    console.log(em2.textContent);  //纯文本内容，不含标签，保留换行、空格等格式
   em1.innerHTML='诗经<strong>小雅</strong>';
   em1.innerText='诗经<em>小雅</em>';
   em1.textContent='诗经<br>小雅';
</script>
</html>